<template>
  <el-form class="addSupplygoodsOrder">
    <el-card
      v-if="state == 'YCQRSupplyList'"
      shadow="never"
      style="margin-top: 1%"
    >
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="card-header">
            <div
              style="
                width: 4px;
                height: 20px;
                background-color: #409eff;
                margin-right: 5px;
              "
            />
            <span>云采确认</span>
          </div>
          <div style="margin: 0 10px">
            <closeTagButton id="closeTagButtonRef" />
          </div>
        </div>
      </template>
      <el-form :model="formYC" label-width="150px" :rules="rulesForStepOne">
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态" required>
              <el-radio-group v-model="formYC.auditStatus" class="ml-4">
                <el-radio value="2">通过</el-radio>
                <el-radio value="3">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="确认说明">
              <el-input v-model="formYC.auditReason" placeholder="" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="附件">
              <el-upload
                v-model:file-list="formYC.auditFileFiles"
                class="upload-demo"
                :action="uploadUrl"
                :headers="headers"
                multiple
                :on-preview="handlePreview"
                :on-success="handleSuccess"
                style="width: 60%"
              >
                <el-button :icon="Upload" color="#1E3485"> 点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: center">
          <el-button type="primary" color="#1E3485" @click="YCQR()">
            确认</el-button
          >
          <el-button @click="black()"> 取消</el-button>
        </div>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 1%">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="card-header">
            <div
              style="
                width: 4px;
                height: 20px;
                background-color: #409eff;
                margin-right: 5px;
              "
            />
            <span>基本信息</span>
          </div>
          <div v-if="state != 'YCQRSupplyList'">
            <!-- <el-button type="primary" color="#1E3485">保存并提交</el-button>
            <el-button type="primary" color="#1E3485">保存</el-button> -->
            <closeTagButton id="closeTagButtonRef" />
          </div>
        </div>
      </template>
      <el-form :model="form" label-width="150px" :rules="rulesForStepOne">
        <el-row>
          <el-col :span="24">
            <el-form-item label="采购合同" style="width: 90%">
              <el-select
                v-model="form.contractName"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号" style="width: 80%">
              <el-input
                v-model="form.orderSn"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单名称" style="width: 80%">
              <el-input
                v-model="form.orderName"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划收货时间" style="width: 80%">
              <el-date-picker
                v-model="form.receivingTime"
                type="date"
                placeholder=""
                disabled
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="价格类型" style="width: 80%">
              <el-radio-group v-model="formHT.priceType" disabled class="ml-4">
                <el-radio value="0">锁定</el-radio>
                <el-radio value="1">浮动</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="支付说明" style="width: 90%">
              <el-input
                v-model="formHT.priceTypeMark"
                :rows="3"
                type="textarea"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="formHT.priceType == '1'">
          <el-row>
            <el-col :span="8">
              <el-form-item label="基准价" style="width: 90%">
                <el-input
                  v-model="formHT.basePrice"
                  placeholder=""
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="涨幅" style="width: 90%">
                <el-input
                  v-model="formHT.increasePrice"
                  placeholder=""
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="涨幅比率" style="width: 90%">
                <el-input
                  v-model="formHT.increaseRate"
                  placeholder=""
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="当天铜价" style="width: 90%">
                <el-input
                  v-model="form.copperPrice"
                  placeholder=""
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="铜价日期" style="width: 90%">
                <el-date-picker
                  v-model="form.copperDate"
                  type="date"
                  disabled
                  placeholder=""
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="修改人" style="width: 90%">
                <el-input
                  v-model="form.copperUpdatePersonName"
                  placeholder=""
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" style="width: 90%">
              <el-input
                v-model="form.supplyMark"
                :rows="1"
                type="textarea"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供货附件" style="width: 90%">
              <el-upload
                v-model:file-list="form.supplierFiles"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
              >
                <!-- <el-button type="primary" color="#1E3485"> 点击上传</el-button> -->
                <template #tip>
                  <div
                    class="el-upload__tip"
                    style="width: 200px; margin-top: -40px !important"
                  />
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="云采附件" style="width: 90%">
              <el-upload
                v-model:file-list="form.supplyConfirmFile"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
              >
                <!-- <el-button type="primary" color="#1E3485"> 点击上传</el-button> -->
                <template #tip>
                  <div
                    class="el-upload__tip"
                    style="width: 200px; margin-top: -40px !important"
                  />
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 1%">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="card-header">
            <div
              style="
                width: 4px;
                height: 20px;
                background-color: #409eff;
                margin-right: 5px;
              "
            />
            <span>供货信息</span>
          </div>
        </div>
      </template>
      <el-form :model="form" label-width="150px" :rules="rulesForStepOne">
        <el-row>
          <el-col :span="10">
            <el-form-item label="供货时间" style="width: 80%">
              <el-date-picker
                v-model="form.shipmentAt"
                type="date"
                placeholder=""
                disabled
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="供货人" style="width: 80%">
              <el-input
                v-model="form.shipmentUserName"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="供货说明" style="width: 100%">
              <el-input
                v-model="form.shipmentDesc"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="云采发货单附件" style="width: 80%">
              <el-upload
                v-model:file-list="form.supplyConfirmFile"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
              >
                <!-- <el-button type="primary" color="#1E3485"> 点击上传</el-button> -->
                <template #tip>
                  <div
                    class="el-upload__tip"
                    style="width: 200px; margin-top: -40px !important"
                  />
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="厂家发货单附件" style="width: 80%">
              <el-upload
                v-model:file-list="form.supplyFile"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
              >
                <!-- <el-button type="primary" color="#1E3485"> 点击上传</el-button> -->
                <template #tip>
                  <div
                    class="el-upload__tip"
                    style="width: 200px; margin-top: -40px !important"
                  />
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="验收时间" style="width: 80%">
              <el-date-picker
                v-model="form.takeAt"
                type="date"
                placeholder=""
                disabled
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="验收人" style="width: 80%">
              <el-input
                v-model="form.takeUserName"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="验收说明" style="width: 100%">
              <el-input
                v-model="form.takeDesc"
                :rows="1"
                type="textarea"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="验收凭证" style="width: 80%">
              <el-upload
                v-model:file-list="form.takeFiles"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
              >
                <!-- <el-button type="primary" color="#1E3485"> 点击上传</el-button> -->
                <template #tip>
                  <div
                    class="el-upload__tip"
                    style="width: 200px; margin-top: -40px !important"
                  />
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="送货单" style="width: 80%">
              <el-upload
                v-model:file-list="form.supplyFile"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                multiple
              >
                <!-- <el-button type="primary" color="#1E3485"> 点击上传</el-button> -->
                <template #tip>
                  <div
                    class="el-upload__tip"
                    style="width: 200px; margin-top: -40px !important"
                  />
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="上传时间" style="width: 80%">
              <el-date-picker
                v-model="form.supplyTime"
                type="date"
                placeholder=""
                disabled
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="上传人" style="width: 80%">
              <el-input
                v-model="form.supplyUserName"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="送货说明" style="width: 100%">
              <el-input
                v-model="form.supplyMark"
                :rows="1"
                type="textarea"
                placeholder=""
                disabled
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="供货附件" style="width: 100%">
              <div style="width: 100%">
                <vxe-table
                  border
                  min-height="300"
                  max-height="300"
                  header-align="center"
                  :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }"
                  :data="TableData"
                  size="mini"
                >
                  <vxe-column
                    field="materialCode"
                    width="120"
                    title="材料编码"
                  />
                  <vxe-column
                    field="materialName"
                    width="120"
                    title="材料名称"
                  />
                  <vxe-column field="materialSpecs" width="220" title="规格" />
                  <vxe-column field="materialModel" width="240" title="型号" />
                  <vxe-column field="materialUnit" width="100" title="单位" />
                  <vxe-column field="materialBrand" width="100" title="品牌" />
                  <vxe-column
                    field="materialNum"
                    width="100"
                    fixed="right"
                    title="订单数量"
                  />
                  <vxe-column
                    field="supplyNum"
                    width="120"
                    fixed="right"
                    title="本次发货量"
                  />
                  <vxe-column
                    field="comfirmSupplyNum"
                    width="120"
                    fixed="right"
                    title="项目确认数量"
                  />
                  <vxe-column
                    field="includingTaxUnitPrice"
                    width="120"
                    fixed="right"
                    title="含税单价(元)"
                  />
                  <vxe-column
                    field="tax"
                    width="100"
                    fixed="right"
                    title="税率(%)"
                  />
                  <vxe-column
                    field="includingTaxTotalPrice"
                    width="120"
                    fixed="right"
                    title="含税总金额(元)"
                  />
                  <vxe-column
                    field="includingTaxUnitPrice"
                    width="120"
                    fixed="right"
                    title="合同含税单价(元)"
                  />
                  <vxe-column
                    field="materialMark"
                    width="100"
                    fixed="right"
                    title="备注"
                  />
                </vxe-table>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card
      v-if="form.supplyStatus == '5'"
      shadow="never"
      style="margin-top: 1%"
    >
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="card-header">
            <div
              style="
                width: 4px;
                height: 20px;
                background-color: #409eff;
                margin-right: 5px;
              "
            />
            <span>云采确认记录</span>
          </div>
        </div>
      </template>
      <el-form label-width="150px">
        <vxe-table ref="tableRef" border :data="Confirmationrecord">
          <vxe-column
            field="statusName"
            title="状态"
            width="100"
            fixed="left"
          />
          <vxe-column
            field="createdBy"
            title="确认人"
            width="400"
            fixed="left"
          />
          <vxe-column
            field="createdAt"
            title="确认时间"
            width="400"
            fixed="left"
          />
          <vxe-column field="mark" title="确认说明" fixed="left" />
          <vxe-column field="file" title="附件" fixed="left" />
        </vxe-table>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 1%">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="card-header">
            <div
              style="
                width: 4px;
                height: 20px;
                background-color: #409eff;
                margin-right: 5px;
              "
            />
            <span>收货人</span>
          </div>
        </div>
      </template>
      <el-form label-width="150px">
        <vxe-table ref="tableRef" border :data="consigneeTableData">
          <vxe-column field="consigneeName" title="姓名" fixed="left" />
          <vxe-column field="consigneePhone" title="手机号" fixed="left" />
          <!-- <vxe-column
            field=""
            title="操作"
            fixed="right"
            width="200"
            show-overflow="true"
          >
            <template #default v-slot="{ row }">
              <vxe-button @click="viewDetails(row)">查看详情</vxe-button>
              <vxe-button @click="editRow(row)">编辑</vxe-button>
            </template>
          </vxe-column> -->
        </vxe-table>
      </el-form>
    </el-card>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import closeTagButton from "@/components/closeTagButton.vue";
import { Search, Upload } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { VxeTableInstance, VxePagerEvents } from "vxe-table";
import type {
  ComponentSize,
  FormInstance,
  FormRules,
  UploadFile
} from "element-plus";
import { useRouter, useRoute } from "vue-router";
import {
  getposupplyinfo,
  getposupplymaterial,
  getposupplywirepayinfo,
  getsupplyOrderOrderinfo,
  updateposupplycommitAudit,
  auditconfirmhistorylist
} from "@/api/ERP_SupplyManage";

import { getconsigneelist } from "@/api/ERP_SupplyManage";

import { headers, uploadUrl, getDictDetail } from "@/api/utils";
import type { UploadProps, UploadUserFile } from "element-plus";

// 路由跳转
const route = useRoute();
// 页面状态
const state = ref(route.query.action);

onMounted(() => {
  if (state.value == "view" || state.value == "YCQRSupplyList") {
    getinfo();
  }
});

//表单校验
const rulesForStepOne = reactive<FormRules>({});

// 表单数据
const form = ref({
  id: "",
  applyId: "",
  contractName: "",
  contractId: "",
  orderSn: "",
  orderName: "",
  receivingTime: "",
  priceType: "",
  priceTypeMark: "",
  basePrice: "",
  increasePrice: "",
  increaseRateyId: "",
  copperPrice: "",
  copperDate: "",
  copperUpdatePersonName: "",
  orderDesc: "",
  supplierFiles: [],
  supplyConfirmFile: [],
  takeAt: "",
  takeUserName: "",
  takeDesc: "",
  takeFiles: [],
  supplyFile: [],
  supplyTime: "",
  supplyUserName: "",
  supplyMark: "",
  supplyStatus: "",
  shipmentAt: "",
  shipmentUserName: "",
  shipmentDesc: "",
  updatedBy: ""
});
const formHT = ref({
  priceType: "",
  priceTypeMark: "",
  basePrice: "",
  increasePrice: "",
  increaseRate: "",
  copperPrice: "",
  copperDate: "",
  copperUpdatePersonName: "",
  orderDesc: "",
  supplierFiles: [],
  supplyConfirmFile: []
});

const formYC = ref({
  auditStatus: "",
  auditReason: "",
  auditFileUrl: "",
  auditFileFiles: []
});

// 表格数据
const TableData = ref([]);
const Confirmationrecord = ref([]);
const consigneeTableData = ref([]);

// 获取详情信息
const getinfo = async () => {
  const all = await getposupplyinfo({ id: route.query.id }).then(
    (response: any) => {
      form.value = response.data;
      if (response.data.supplyConfirmFile) {
        form.value.supplyConfirmFile = JSON.parse(
          response.data.supplyConfirmFile
        ).map(file => ({
          name: file.fileOriginName,
          url: file.fileUrl
        }));
      } else {
        form.value.supplyConfirmFile = [];
      }
      if (response.data.takeFiles) {
        form.value.takeFiles = JSON.parse(response.data.takeFiles).map(
          file => ({
            name: file.fileOriginName,
            url: file.fileUrl
          })
        );
      } else {
        form.value.takeFiles = [];
      }
      if (response.data.supplyFile) {
        form.value.supplyFile = JSON.parse(response.data.supplyFile).map(
          file => ({
            name: file.fileOriginName,
            url: file.fileUrl
          })
        );
      } else {
        form.value.supplyFile = [];
      }
      if (response.data.supplierFiles) {
        form.value.supplierFiles = JSON.parse(response.data.supplierFiles).map(
          file => ({
            name: file.fileOriginName,
            url: file.fileUrl
          })
        );
      } else {
        form.value.supplierFiles = [];
      }
      // 获取订单列表
      let params: any = {};
      params.pageIndex = 1;
      params.pageSize = 50;
      params.id = route.query.id;
      // TODO 需要换成获取供货清单的接口
      getposupplymaterial(params).then((response: any) => {
        if (response.data) {
          TableData.value = response.data.records;
        }
      });
      // 获取订单列表
      getconsigneelist({
        pageIndex: 1,
        pageSize: 50,
        id: form.value.applyId
      }).then((response: any) => {
        if (response.data) {
          consigneeTableData.value = response.data.records;
        }
      });
      //获取合同部分数据
      getposupplywirepayinfo({
        pageIndex: 1,
        pageSize: 10,
        contractId: form.value.contractId
      }).then((response: any) => {
        if (response.data) {
          formHT.value = response.data;
        }
      });
      auditconfirmhistorylist({
        bizId: route.query.id
      }).then((response: any) => {
        if (response.data) {
          Confirmationrecord.value = response.data;
        }
      });
    }
  );
};

async function YCQR() {
  let params: any = {};
  params.id = form.value.id;
  params.auditStatus = formYC.value.auditStatus;
  params.auditReason = formYC.value.auditReason;
  params.auditFileUrl = formYC.value.auditFileUrl;
  const all = await updateposupplycommitAudit(params).then((response: any) => {
    if (response.code == 200) {
      ElMessage({
        message: "确认成功",
        type: "success"
      });
      document.getElementById("closeTagButtonRef").click();
    }
  });
}

function black() {
  document.getElementById("closeTagButtonRef").click();
}

//上传
const fileList = ref<UploadUserFile[]>([]);
const contractFileList: any = [];
const filePreviewDialogVisible = ref(false);
const fileUrl = ref("");

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
  if (uploadFile.response) {
    const response = uploadFile.response as unknown as any;
    window.open(response.data.url, "_blank");
  } else {
    window.open(uploadFile.url, "_blank");
  }
};

// 文件上传成功,传参赋值，格式修改
const handleSuccess = (fileList: any) => {
  contractFileList.push(fileList.data);
  const formatterObj = [];
  for (let i in contractFileList) {
    let tempvalue: any = {};
    tempvalue.fileUrl = contractFileList[i].url;
    tempvalue.fileSuffix =
      "." +
      contractFileList[i].name.substring(
        contractFileList[i].name.lastIndexOf(".") + 1
      );
    tempvalue.fileOriginName = contractFileList[i].name;
    formatterObj.push(tempvalue);
  }
  formYC.value.auditFileUrl = JSON.stringify(formatterObj);
};
// 非新增不许删除
const beforeRemove = (uploadFile, uploadFiles) => {
  if (state.value == "add") {
    ElMessage.error("当前状态文件不可删除");
    return false;
  }
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
}
.header-span {
  display: flex;
  align-items: center;
}

.item {
  display: flex;
  align-items: center;
  margin-left: 20px;
  font-size: 12px;
}
.container {
  height: 20px;
  width: 80px;
  text-align: center;
  border: 1px solid #eee;
  line-height: 20px;
  font-size: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
</style>
